<template>
    <el-dialog title="订单详情" :visible.sync="detailDialogVisible"
               custom-class='dialog_right dialogScroll_add order-detail' top="0%"
               @open='openDialog' @close="closeDialog">
      <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight-110)+'px'}]">

        <div class="ticket-card">
          <el-row class="station-info">
            <el-col :span="8" class="station-name">{{ orderDetail.startSite }}</el-col>
            <el-col :span="8">
              <div class="detail-info">
                约{{ orderDetail.time }}小时
                <mk-ticket-arrow class="ticket-arrow"></mk-ticket-arrow>
              </div>
            </el-col>
            <el-col :span="8" class="station-name">{{ orderDetail.endSite }}</el-col>
          </el-row>
          <div class="other-info">
            <el-row :gutter="20">
              <el-col :span="4">发车时间</el-col>
              <el-col :span="20">{{ orderDetail.rideTime | formatMinutes }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4">车票数量</el-col>
              <el-col :span="20">{{ orderDetail.count }} 张</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4">座位号</el-col>
              <el-col :span="20">
                <span v-for="(item,index) in orderDetail.seatNumbers" :key="index">
                  <span v-if="index != 0">、</span>{{ item }}
                </span>
              </el-col>
            </el-row>
          </div>
        </div>

        <el-form label-width="110px">
          <div class="el-form-item-info">
            <el-form-item label="订单编号">{{ orderDetail.number }}</el-form-item>
            <el-form-item label="订单状态">{{ orderDetail.status }}</el-form-item>
            <el-form-item label="购票人姓名">{{ orderDetail.buyer }}</el-form-item>
            <el-form-item label="电话">{{ orderDetail.phone }}</el-form-item>
            <el-form-item label="单价">￥{{ orderDetail.price | currency('', 2) }}</el-form-item>
            <el-form-item label="合计金额">￥{{ orderDetail.totalPrice | currency('', 2) }}</el-form-item>
            <el-form-item label="支付方式">{{ orderDetail.payWay }}</el-form-item>
            <el-form-item label="下单时间">{{ orderDetail.orderTime | formatMinutes }}</el-form-item>
            <el-form-item label="支付时间">{{ orderDetail.payTime | formatMinutes }}</el-form-item>
          </div>
        </el-form>
      </el-scrollbar>
    </el-dialog>
</template>

<script>
  import MkTicketArrow from '../../../components/ticketArrow.vue'
  import ticketService from '../../../services/ticket'
  import {mapState} from 'vuex'
  export default {
    name: 'sellTicketForm',

    components: {
      MkTicketArrow
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
    }),
    props: ['dialogVisible', 'currentId'],

    methods: {
      openDialog() {
        ticketService.loadOrderDetailServer({
          id: this.currentId
        }, data => {
          this.orderDetail = data.data;
        });
      },

      closeDialog () {
        this.$emit('closeDialog');
      }
    },

    watch: {
      dialogVisible: function (value) {
        this.detailDialogVisible = value;
      }
    },

    mounted () {
    },

    data () {
      //字母和数字
      let numCheck = (rule, val, callback) => {
        let value=(val+'').trim();
        if (value == '') {
          callback('车位号不能为空');
        } else {
          let reg=/^[A-Za-z0-9]+$/g
          if (!reg.test(value)) {
            callback("车位号只能由数字和字母组成");
          }
          callback();
        }
      };
      return {
        detailDialogVisible: false,
        orderDetail: {},
      }
    },

    filters: {
      formatMinutes (value) {
        if (value) {
          return new Date(value).pattern('yyyy-MM-dd HH:mm');
        } else {
          return '';
        }
      }
    }
  }
</script>

<style lang='less'>
  @import "../../../assets/style/main";

  .order-detail {
    .ticket-card {
      margin-bottom: 30px;
      width: 84%;
    }
    .el-form-item-info {
      .el-form-item {
        margin-bottom: 0px;
      }
    }
    .ticket-card {
      padding: 30px;
      background-color: @borderColor;
      .station-info .el-col {
        width: auto;
        max-width: 33.3333%;
      }
      .station-name {
        padding-top: 10px;
        font-size: 24px;
        color: @fontColorOne;
      }
      .detail-info {
        min-width: 122px;
        text-align: center;
        position: relative;
        line-height: 28px;
        font-size: 14px;
        color: @fontColorTwo;
      }
      .ticket-arrow {
        position: absolute;
        left: 10px;
        top: 20px;
      }
      .other-info {
        padding-top: 30px;
        .el-row + .el-row {
          padding-top: 10px;
        }
        .el-col:first-child {
          text-align: right;
        }
        .el-col:last-child {
          color: @fontColorOne;
        }
      }
    }

  }
</style>
